<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        td{
            width: 200px;
            text-align: center;
            height: 30px;
        }
        [colspan]{
            background: red;
        }

        select, button {
            height: 30px;
        }
        input{
              height: 24px;
          }

        div{
            margin-bottom: 5px;
        }
    </style>
</head>
<body>

    <div class="top1">
        <select id="select1" onchange="getrate()">
            <option value="0">美元</option>
            <option value="1">人民币</option>
            <option value="2">欧元</option>
            <option value="3">港元</option>
            <option value="4">日元</option>
            <option value="5">韩币</option>
        </select>
        <button onclick="changeselect()">互换</button>
        <select id="select2" onchange="getrate()">
            <option value="0">美元</option>
            <option value="1">人民币</option>
            <option value="2">欧元</option>
            <option value="3">港元</option>
            <option value="4">日元</option>
            <option value="5">韩币</option>
        </select>
        <span>数额:</span>
        <input id="inputstr">
        <button onclick="getrate()">汇率换算</button>

    </div>
    <table border="1">
        <tr>
            <td colspan="3">按当前汇率换算结果</td>
        </tr>
        <tr>
            <td id="td21">美元</td>
            <td>汇率</td>
            <td id="td23">人民币</td>
        </tr>
        <tr>
            <td id="td31">100</td>
            <td id="td32">6</td>
            <td id="td33">600</td>
        </tr>
    </table>

    <script>

        var rate = [1, 7,  1,  7,  148,  1300]
        var money = ["美元", "人民币", "欧元", "港元", "日元", "韩币"]

        function getrate() {
            var inputStr = document.getElementById("inputstr").value
            var select1 = document.getElementById("select1").value
            var select2 = document.getElementById("select2").value

            if (inputStr == ""){
                return
            }

            var rateMoney = rate[select2]/ rate[select1]


            document.getElementById("td21").innerText = money[select1]
            document.getElementById("td23").innerText = money[select2]
            document.getElementById("td31").innerText = inputStr
            document.getElementById("td32").innerText = rateMoney
            document.getElementById("td33").innerText = rateMoney * inputStr
        }
        function changeselect() {

            var select1Node = document.getElementById("select1")
            var select2Node = document.getElementById("select2")

           var temp = select1Node.value
            select1Node.value = select2Node.value
            select2Node.value = temp;
        }
    </script>
</body>
</html>
